css: Horizontal Menus

Mission

I believe that the only appropriate HTML markup for a menu is a list, namely unordered list marked by the <ul> tag. Styling such a list vertically is pretty simple, however what if you need a horizontal menu?

Well, the first option that came to my mind was setting list items property display to inline, instead of their default block. However that would prevent applying block-only styles like background, padding, etc. That’s why I took another approach — floats.

All following samples share the same HTML source code — a simple list resulting into this (unstyled) rendering:

• Item 1
• Item 2
• Item 3 (long)
• Item 4

And in all samples the list items are floated using the rule

li {float: left}

Solutions

1. Fixed padding

• Item 1
• Item 2
• Item 3 (long)
• Item 4

The menu items above have variable width and are separated by fixed padding (1em).

2. Variable padding

• Item 1
• Item 2
• Item 3 (long)
• Item 4

The menu items above are distributed evenly across the whole menu bar width. Each item has its width set to 24%.

3. Boxed items

• Item 1
• Item 2
• Item 3 (long)
• Item 4

In this sample are menu items of fixed width (6em) and fixed right margin (1em). Backgrounds and borders are applied to LIs instead of the whole menu.

4. Rollovers

• Item 1
• Item 2
• Item 3 (long)
• Item 4

Finally, the previous sample can be easily enhanced with rollover effect. The anchors inside the LIs have their width set to 100% and for their :hover pseudo class is set to a different background. Using a graphic background, this effect could be even more interesting.

Notes and compatibility issues

I’ve tested the page on Windows 95/98 in the following browsers:

• IE 5.0
• IE 6
• Opera 6
• K-Meleon 0.6 (Mozilla rendering engine)
• Mozilla, nightbuild of 6/4/2002
• Konqueror 3.0.0

All browsers listed above displayed the page the same way, except minor differences in default properties not set explicitly in the style sheet. During development I encountered the following issues:

1. This approach is not suitable for older browsers like NN4 or IE4/Win. Developers are supposed to serve an alternate style sheet to those browsers or hide the style sheet from them at all (e.g. via @import).
2. The menu has to be wrapped by a div that is used for styling background color, left margin/padding, etc. I’ve found no way to style the UL itself, because I can’t clear the float inside it. Thus the height of the OL always equals zero.
3. The float property of the list items is cleared via

   <br clear="left">Attempts to do it by <div> failed in IE/Win and Opera for various reasons. It’s a pity, because the clear attribute is not allowed in the strict doctypes.

4. For some strange reason, margin: 1em 0 applied on the div wrapped around a menu has no effect in IE/Win, so between the menus and the paragraphs just below them there are no empty space. It works fine in Opera and K-Meleon though.
5. Because of IE5/Win bug, the div wrapping the menu width must be explicitly set to 100%. Otherwise the percents in the sample #2 are counted from the viewport’s width, not the width of the parent element.

Feel free to copy the code (style sheet is embedded into the HTML document) and use it as you want. Any comments, suggestion, fixes, etc. are highly appreciated at marek@sovavsiti.cz.

Thanks,

—

source: sovavsiti.cz